<template>
    <div class="w750 gray-body">
        <van-tabs v-model="active" :color="themes.color" :title-active-color="themes.color" @change="switchType">
            <van-tab :title="item.name" v-for="(item, index) in navArr" :key="index">
                <div class="submit-order" :class="themes.theme">
                    <van-list
                        v-model="paging.loading"
                        :finished="paging.finished"
                        :finished-text="!paging.emptylist ? '没有更多了' : ''"
                        @load="onLoad"
                        :immediate-check="false"
                        :error.sync="paging.error"
                        error-text="请求失败，点击重新加载"
                        v-if="paging.tab"
                    >
                        <div class="submit-list">
                            <div class="submit-con" v-for="(item, index) in list" :key="index">
                                <div class="submit-tit">
                                    <span class="order-num">
                                        订单号：
                                        <span class="num">{{ item.subNumber }}</span>
                                    </span>
                                    <span class="return-state" v-if="item.applyState == -20">已取消</span>
                                    <span class="return-state" v-if="item.applyState == -10">商家不同意</span>
                                    <span class="return-state" v-if="item.applyState == 0">待商家审核</span>
                                    <span class="return-state" v-if="item.applyState == 10">待买家返货</span>
                                    <span class="return-state" v-if="item.applyState == 20">待商家收货</span>
                                    <span class="return-state" v-if="item.applyState == 30">商家拒绝收货</span>
                                    <span class="return-state" v-if="item.applyState == 40">待商家处理</span>
                                    <span class="return-state" v-if="item.applyState == 50">待买家收货</span>
                                    <span class="return-state" v-if="item.applyState == 60">已完成</span>
                                </div>
                                <div class="pro-mes clearfix" @click="goGoodsDet(item.productId)">
                                    <div class="pro-img" v-if="item.subItemId != 0">
                                        <legend-image :pic="item.productImage" alt="" :isJD="item.prodSource == 'JD'" />
                                        <img src="@/assets/images/haitao-small.png" class="haitao" v-if="item.specialOrderType == 'OVERSEAS_ORDER'" />
                                    </div>
                                    <div class="pro-name">
                                        <span class="name">{{ item.productName }}</span>
										<!-- serviceType 1 退款 2退款退货 3换货 4维修") -->
                                        <div class="sku" v-if="item.subItemId != 0 && item.serviceType != 1">数量：{{ item.applyGoodsNum }}</div>
                                        <div class="btn-box">
                                            <span
                                                class="btn cancel"
                                                v-if="
                                                    item.applyState == 0 ||
                                                    item.applyState == -10 ||
                                                    item.applyState == 10 ||
                                                    item.applyState == 20 ||
                                                    item.applyState == 30
                                                "
                                                @click.stop="Candelaction(item.refundSn)"
                                            >
                                                取消申请
                                            </span>
                                            <span class="btn" @click.stop="goDetail(item.refundId)">查看详情</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </van-list>
                    <Noempty
                        :pic="require('../../../assets/images/order-empty.png')"
                        :title="'您没有申请'"
                        v-if="paging.emptylist && !paging.error"
                    />
                </div>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import PageUtil from 'utils/PageUtil'
import Noempty from 'components/Noempty/Noempty'
import legendImage from 'components/legendImage/legendImage'
import { subRefundReturnList } from 'api/refunds'
import { afterSale } from 'api/afterSale'
const pageUtil = new PageUtil(subRefundReturnList)
export default {
    data() {
        return {
            list: [],
            navArr: [{ name: '处理中' }, { name: '申请记录' }],
            active: 0,
            paging: {
                tab: false,
                loading: false,
                finished: false,
                error: false, // 是否错误
                emptylist: false //是否显示列表为空时的样式
            },
            ReturnList_status: 0
        }
    },
    mounted() {
        let that = this
        let params = { status: this.ReturnList_status }
        pageUtil.loadListByPage(that, params)
    },
    methods: {
        goback() {
            this.$router.back()
            this.$router.isBack = true
        },

        switchType(e) {
            let that = this
            let switchNumber = e
            switch (switchNumber) {
                case 0:
                    status = 0
                    break
                case 1:
                    status = ' '
                    break
            }
            this.ReturnList_status = status
            let params = { status: this.ReturnList_status }
            pageUtil.loadListByPage(that, params)
        },

        onLoad() {
            pageUtil.loadListByPageMore()
        },

        goDetail(refundId) {
            this.$router.push({
                path: `/afterSaleDetail`,
                query: {
                    refundId: refundId
                }
            })
        },
        //去商品详情
        goGoodsDet(productId) {
            if (productId == 0) {
                return
            }
            this.$router.push({
                path: `/goodsDetail`,
                query: {
                    goodsInfoId: productId
                }
            })
        },
        //取消申请
        Candelaction(refundSn) {
            let that = this
            this.$dialog
                .confirm({
                    title: '是否取消申请',
                    message: '请您再三考虑哦~~~'
                })
                .then(() => {
                    afterSale.applyCancel({ refundSn: refundSn }).then((res) => {
                        if (res.status == 1) {
                            this.$toast({
                                message: '取消成功',
                                duration: 1000
                            })
                            let params = { status: that.ReturnList_status }
                            pageUtil.loadListByPage(that, params)
                        } else {
                            this.$toast({
                                message: res.msg,
                                duration: 1000
                            })
                        }
                    })
                })
                .catch(() => {
                    // on cancel
                })
        }
    },
    computed: {
        ...mapState(['themes'])
    },
    components: {
        Noempty,
        legendImage
    }
}
</script>

<style src="../../../assets/css/submit-order.css" scoped></style>
<style src="../../../assets/css/return.css" scoped></style>
<style src="../../../assets/css/style/submit-order-style.css" scoped></style>
<style scoped>
.order-num {
    display: block;
    -webkit-flex: 1;
    -ms-flex: 1;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    flex: 1;
    position: relative;
    margin-right: 10px;
    font-family: arial;
    color: #999;
    font-size: 14px;
}
</style>
